<template>
  <view class="pending-list-container">
    <view class="task-list">
      <view 
        class="task-item" 
        v-for="(task, index) in taskList" 
        :key="index"
        @click="selectTask(task)"
      >
        <view class="task-info">
          <text class="task-code">{{ task.takingCode }}</text>
          <text class="task-name">{{ task.takingName }}</text>
          <text class="task-date">日期：{{ task.takingDate || '未知' }}</text>
          <text class="task-remark">备注：{{ task.remark || '无' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { listForStatus } from '@/api/wm/snTaking.js'

export default {
  data() {
    return {
      taskList: []
    }
  },
  onLoad() {
    this.loadTasks()
  },
  methods: {
    loadTasks() {
      uni.showLoading({ title: '加载中...' })
      listForStatus({ status: 'CONFIRMED' }).then(res => {
        this.taskList = res.rows || []
      }).finally(() => uni.hideLoading())
    },
    selectTask(task) {
      uni.$emit('selectedTaking', task);
      uni.navigateBack();
    },
    getStatusText(status) {
      // 根据需要定义
      return status
    }
  }
}
</script>

<style>
.pending-list-container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.list-header {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  text-align: center;
}

.header-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.task-item {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.task-info {
  flex: 1;
}

.task-code {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
  display: block;
  margin-bottom: 8rpx;
}

.task-name {
  font-size: 26rpx;
  color: #666666;
  display: block;
  margin-bottom: 8rpx;
}

.task-date {
  font-size: 24rpx;
  color: #888888;
  display: block;
  margin-bottom: 8rpx;
}

.task-remark {
  font-size: 24rpx;
  color: #888888;
  display: block;
  word-break: break-all; /* 添加换行支持 */
}

.task-status {
  padding: 12rpx 24rpx;
  background-color: #f0f0f0;
  border-radius: 8rpx;
  font-size: 24rpx;
  color: #007AFF;
}
</style>
